<template lang="html">
  <div>
    <sui-segment color="red">Red</sui-segment>
    <sui-segment color="orange">Orange</sui-segment>
    <sui-segment color="yellow">Yellow</sui-segment>
    <sui-segment color="olive">Olive</sui-segment>
    <sui-segment color="green">Green</sui-segment>
    <sui-segment color="teal">Teal</sui-segment>
    <sui-segment color="blue">Blue</sui-segment>
    <sui-segment color="violet">Violet</sui-segment>
    <sui-segment color="purple">Purple</sui-segment>
    <sui-segment color="pink">Pink</sui-segment>
    <sui-segment color="brown">Brown</sui-segment>
    <sui-segment color="grey">Grey</sui-segment>
    <sui-segment color="black">Black</sui-segment>
  </div>
</template>

<script>
export default {
  name: 'ColorExample',
};
</script>
